<template>
	<view :class="`receiving_orders_prompt_mask ${show_ani ? 'show' : ''}`" @click.self="close" v-if="visabled"
		:style="`--t:${close_time / 1000}s`">
		<view class="receiving_orders_prompt">
			<view class="prompt_head">
				<view class="prompt_head_title">接单提示</view>
				<view class="prompt_head_content">为了保障您在使用运单(接单、运费、结算)相关服务时的合法权益，请您完成相关运输合规资质认证。</view>
				<view class="close_btn" @click="close">
					<up-icon name="close" bold color="#fff" size="18px"></up-icon>
				</view>
			</view>
			<view class="prompt_content">
				<view class="prompt_content_item">
					<div @click="to_auth"
						style="display: flex;justify-content: space-between;padding: 13px 15px;background-color: #fff;border-radius: 5px;border: 1px solid #eaeaeb;">
						<div style="display: flex;align-items: center;">
							<image style="width: 18px;height: 18px;margin-right: 5px;"
								src="/static/images/icon/auth_name.png"></image>
							<div style="font-size: 18px;">实名认证</div>
						</div>
						<div :style="`color: #${auth.name ? '5ac725' : '999'};fontSize:18px`"
							style="display: flex;align-items: center;">
							<span style="margin-right: 10px;">{{ auth.name ? '已认证' : '未认证' }}</span>
							<up-icon name="arrow-right"></up-icon>
						</div>
					</div>
					<view class="prompt_content_item_end">
						<text>请按提示完成个人信息认证</text>
					</view>
				</view>
				<view class="prompt_content_item" v-if="role === 'driver'">
					<div @click="to_car"
						style="display: flex;justify-content: space-between;padding: 13px 15px;background-color: #fff;border-radius: 5px;border: 1px solid #eaeaeb;">
						<div style="display: flex;align-items: center;">
							<image style="width: 18px;height: 18px;margin-right: 5px;"
								src="/static/images/icon/auth_car.png"></image>
							<div style="font-size: 18px;">车辆认证</div>
						</div>
						<div :style="`color: #${auth.car ? '5ac725' : '999'};fontSize:18px`"
							style="display: flex;align-items: center;">
							<span style="margin-right: 10px;">{{ auth.car ? '已认证' : '未认证' }}</span>
							<up-icon name="arrow-right"></up-icon>
						</div>
					</div>
					<view class="prompt_content_item_end">
						<text>请按提示完成车辆认证</text>
					</view>
				</view>
				<view class="prompt_content_end" v-if="role === 'driver'">
					<up-icon name="close-circle-fill" color="c6c6c6" customStyle="marginRight:5px"></up-icon>
					<view>车辆未认证，不可接单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	reactive
} from "vue"
import {
	useUserStore
} from '@/store'
import {
	storeToRefs
} from "pinia"


/* hooks */
const {
	role
} = storeToRefs(useUserStore())


const auth = reactive({
	name: false,
	car: false
})
const visabled = ref(false)
const show_ani = ref(false)
const close_time = ref(250)


const show = (name = false, car = false) => {
	auth.name = name
	auth.car = car
	visabled.value = true
	setTimeout(() => {
		show_ani.value = true
	}, 50)
}
const to_auth = () => {
	if (auth.name) {
		uni.navigateTo({
			url: '/package_mine/pages/auth/userInfo'
		})
	} else {
		if (role.value === 'captain') {
			uni.navigateTo({
				url: "/package_mine/pages/auth/captainAuth"
			})
		} else {
			uni.navigateTo({
				url: "/package_mine/pages/auth/driverAuth"
			})
		}
	}
}
const to_car = () => {
	if (!auth.name) {
		uni.navigateTo({
			url: '/package_mine/pages/auth/driverAuth'
		})
	} else {
		uni.navigateTo({
			url: '/package_mine/pages/car/car'
		})
	}
}
const close = () => {
	auth.name = false
	auth.car = false
	show_ani.value = false
	setTimeout(() => {
		visabled.value = false
	}, close_time.value)
}

defineExpose({
	close,
	show
})
</script>

<style lang="scss" scoped>
.receiving_orders_prompt_mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 777;
	display: grid;
	align-items: center;
	justify-items: center;
	transition: all var(--t);
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0.5;

	.receiving_orders_prompt {
		width: 100%;
		border-radius: 15px;
		overflow: hidden;
		background-color: #fff;
		animation: UpOut var(--t) forwards;

		.prompt_head {
			background-color: rgb(0, 122, 255);
			color: #fff;
			padding: 45px 12px 60px 12px;
			margin-bottom: -30px;
			position: relative;

			.prompt_head_title {
				font-size: 20px;
				padding-bottom: 10px;
				text-align: center;
			}

			.prompt_head_content {
				font-size: 17px;
			}

			.close_btn {
				position: absolute;
				padding: 10px;
				top: 10px;
				right: 30px;
			}
		}

		.prompt_content {
			position: relative;

			.prompt_content_item {
				width: 85%;
				margin: auto;

				.prompt_content_item_box {
					border-radius: 5px;
					background-color: #fff !important;
					border: 1px solid #ddd;

				}
			}

			.prompt_content_item_end {
				margin: 5px 0 10px;

				&:before {
					content: '*';
					padding: 0 5px;
					color: red;
				}
			}

			.prompt_content_end {
				color: #aaa;
				display: flex;
				justify-content: center;
				height: 20px;
				line-height: 20px;
				padding-bottom: 20px;
				box-sizing: content-box;
			}
		}
	}

	&.show {
		opacity: 1;

		.receiving_orders_prompt {
			animation: LowIn .4s forwards;
		}
	}

	@keyframes LowIn {
		0% {
			transform: scale(1, 1);
			opacity: 0;
		}

		100% {
			transform: scale(0.85, 0.85);
			opacity: 1;
		}
	}

	@keyframes UpOut {
		0% {
			transform: scale(0.85, 0.85);
			opacity: 1;
		}

		100% {
			transform: scale(1, 1);
			opacity: 0;
		}
	}
}
</style>